<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Postcard example</title>
    <style>

@font-face {
    font-family: 'handwriting';
    src: url('fonts/journal-webfont.woff2') format('woff2'),
         url('fonts/journal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'typewriter';
    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
         url('fonts/veteran_typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  font  : 1.3rem sans-serif;
  padding : 0.5em;
  margin  : 0;
  background : #222;
}

form {
  position : relative;
  width  : 740px;
  height : 498px;
  margin : 0 auto;
  padding: 1em;
  box-sizing: border-box;
  background : #FFF url(background.jpg);

  /* we create our grid */
  display  : grid;
  gap : 20px;
  grid-template-columns : repeat(2, 1fr);
  grid-template-rows    : 10em 1em 1em 1em;
}

h1 {
  font : 1em "typewriter", monospace;
  align-self : end;
}

#message {
   grid-row: 1 / 5;
}

#from, #reply {
   display: flex;
}

label {
  font : .8em "typewriter", sans-serif;
}

input,
textarea {
  font    : 1.4em/1.5em "handwriting", cursive, sans-serif;
  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 80%;
  background : none;
}

input:focus,
textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
}

textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 100%;
  height  : 90%;

  border-right: 1px solid;

  /* resize  : none; */
  overflow: auto;
}

button {
  padding      : 5px;
  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;
  cursor       : pointer;
  transform    : rotate(-1.5deg);
}

button:after {
  content      : " >>>";
}

button:hover,
button:focus {
  outline     : none;
  background  : #000;
  color       : #FFF;
}

    </style>
  </head>

<body>

  <form>
    <h1>to: Mozilla</h1>

    <div id="from">
      <label for="name">from:</label>
      <input type="text" id="name" name="user_name">
    </div>

    <div id="reply">
      <label for="mail">reply:</label>
      <input type="email" id="mail" name="user_email">
    </div>

    <div id="message">
      <label for="msg">Your message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </div>

    <div class="button">
      <button type="submit">Send your message</button>
    </div>
  </form>

</body>

</html>
